<!-- 智能组件详情页 -->
<template>
  <div class="smart">
      <div class="big-box">
    <h1 class="box-h1">智能</h1>
    <div class="box">
      <div class="box-shang">
        <div class="item" >
          <div class="item-img" >
            <img  style="margin-top:24px;"
              src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/3accd497afc0047cfbd40f442e3b17df.jpg"
              alt
            >
          </div>
          <div class="item-info">
            <h3>米家智能窗帘</h3>
            <p>窗帘开合随心控</p>
            <p class="price">799元</p>
          </div>
        </div>
        <div class="item">
            <span class="blue-pro">畅销</span>
          <div class="item-img">
            <img
              src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/550177d2e54387521bce9e78cb2949dd.jpg"
              alt
            >
          </div>
          <div class="item-info">
            <h3>小米体脂秤</h3>
            <p>轻松掌握身体脂肪率</p>
            <p class="price">99元</p>
          </div>
        </div>
        <div class="item">
          <div class="item-img">
            <img
              style="margin-top:24px;"
              src="//cdn.cnbj0.fds.api.mi-img.com/b2c-miapp-a1/T1r_x_BgLT1RXrhCrK.jpg"
              alt
            >
          </div>
          <div class="item-info">
            <h3>九号平衡车</h3>
            <p>年轻人的酷玩具</p>
            <p class="price">1449元</p>
          </div>
        </div>
        <div class="item">
          <div class="item-img">
            <img
              style="margin-top:24px;"
              src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/5a312d69c1a5447c9e3d14d42d01a8fb.jpg"
              alt
            >
          </div>
          <div class="item-info">
            <h3>小米智能门锁 推拉式</h3>
            <p>一步推拉，高端智能门锁</p>
            <p class="price">1499元</p>
          </div>
        </div>
        <div class="item">
          <div class="item-img">
            <img
              style="margin-top:24px;"
              src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/49f30069c778b494257320d9da5a1a60.jpg"
              alt
            >
          </div>
          <div class="item-info">
            <h3>Redmi小爱触屏音箱 8英寸</h3>
            <p>超大屏，让智能更多可能</p>
            <p class="price">349元</p>
          </div>
        </div>
      </div>
      <div class="box-xia">
            <div class="item" >
          <span class="blue-pro">畅销</span>
          <div class="item-img" >
            <img
              src="//i8.mifile.cn/b2c-mimall-media/18a82e7cda6ecbc22ecee7ac927d6ff9!250x250.jpg"
              alt
            >
          </div>
          <div class="item-info">
            <h3>米兔折叠婴儿推车</h3>
            <p>出发去向往的地方</p>
            <p class="price">699元</p>
          </div>
        </div>
        <div class="item">
          <div class="item-img">
            <img
              style="margin-top:24px;"
              src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/0294e2f3997bf0cffb7bf48361d03588.jpg"
              alt
            >
          </div>
          <div class="item-info">
            <h3>米家充气宝</h3>
            <p>便携电动打气筒</p>
            <p class="price">199元</p>
          </div>
        </div>
        <div class="item">
          <div class="item-img">
            <img
              style="margin-top:24px;"
              src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/12fe0ea5e8dafecce5ffa65108796683.jpg"
              alt
            >
          </div>
          <div class="item-info">
            <h3>小米小背包</h3>
            <p>城市休闲，简约设计</p>
            <p class="price">29元起</p>
          </div>
        </div>
        <div class="item">
          <div class="item-img">
            <img
              style="margin-top:24px;"
              src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/3520b7c57449585bc3185d31b9d9bd08.jpg"
              alt
            >
          </div>
          <div class="item-info">
            <h3>骑记电动助力自行车</h3>
            <p>畅享城市风景</p>
            <p class="price">799元</p>
          </div>
        </div>
        <div class="item">
          <div class="item-img">
            <img
              style="margin-top:24px;"
              src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/5b4304d0e62a9c874e83eba0649110ee.jpg"
              alt
            >
          </div>
          <div class="item-info">
            <h3>小米旅行箱青春版</h3>
            <p>环保材料，轻便重量</p>
            <p class="price">199元</p>
          </div>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
export default {
    name:"smart",
  data () {
    return {
    };
  },

  components: {},

}

</script>
<style lang='less' scoped>
.big-box{
  display: flex;
  flex-direction: column;
  background-color: lightgray; 
  padding-bottom: 20px;
}
.box-h1{
  font-size: 25px;
  display: flex;
  margin-top: 15px;
  margin-left: 140px;
  padding-top: 50px;
 
}
.box-shang {
  display: flex;
  justify-content: center;
 
}
.box-xia{
  display: flex;
  justify-content: center;
}
.item {
  width: 236px;
  height: 302px;
  background-color: #ffffff;
  text-align: center;
  margin: 8px; 
  
}

.item span {
  display: inline-block;
  width: 67px;
  height: 24px;
  font-size: 14px;
  line-height: 24px;
}
.blue-pro {
  background-color: skyblue;
}
.red-pro {
  background-color: red;
}
.item-img{
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: linear;
    :hover{
        box-shadow: 5px 5px 5px 5px lightgray;;
    }
}
.item-img img {
  width: 160px;
  height: 160px;
  box-sizing: border-box;
 
}
.item-info {
  h3 {
    font-size: 14px;
    color: #333333;
    line-height: 14px;
    font-weight: bold;
    :hover {
      background-color: red;
    }
  }

  p {
    color: #999999;
    line-height: 13px;
    margin: 6px auto 13px;
  }
  .price {
    color: #f20a0a;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
  }
}
</style>